<template>
  <div>
    <!-- 供应商 -->
    <el-card class="supplier_card">
      <el-form :model="searchForm" ref="searchRef" inline>
        <el-form-item label="供应商名称" prop="providerName">
          <el-input
            v-model="searchForm.providerName"
            placeholder="请输入供应商名称"
            class="form_input"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList()"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt-1">
      <div class="w-full flex justify-end">
        <el-button type="primary" @click="openDrawer({ id: 0 })">
          <el-icon><Plus /></el-icon>新增
        </el-button>
      </div>
      <el-table :data="tableData" style="height: calc(100vh - 16rem)">
        <el-table-column prop="providerName" label="供应商名称" />
        <el-table-column
          prop="providerPhone"
          label="联系方式"
          show-overflow-tooltip
        />
        <el-table-column prop="level" label="供应商等级" />
        <el-table-column prop="organizeId" label="是否已授权">
          <template #default="{ row }">
            <el-tag type="primary" v-if="row.organizeId > 0">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="区域" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ row.provinceName }}</span>
            <span> {{ row.cityName }}</span>
            <span> {{ row.areaName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          label="详细地址"
          show-overflow-tooltip
        />

        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDrawer(row)">
              <el-icon><Edit /></el-icon>编辑
            </el-button>
            <el-button type="danger" link @click="handleRemove(row.id)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :size="size"
        :total="total"
        @getList="getList"
      />
    </el-card>

    <el-drawer
      v-model="drawer"
      :title="detailForm.id == 0 ? '新增供应商' : '编辑供应商'"
      destroy-on-close
      size="40%"
    >
      <InsertUpdateSupplier
        :detailForm="detailForm"
        :categoryList="categoryList"
        :levelList="levelList"
        @handleBack="handleBack"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import PagingQuery from "@/components/PagingQuery.vue";
import InsertUpdateSupplier from "./component/InsertUpdateSupplier.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetProviderToOpticianList,
  DeleteProviderToOptician,
  GetGoodsTotalCategory,
  GetProviderToOpticianLevelList,
} from "../../../../wailsjs/go/api/GoodsApi.js";

onMounted(() => {
  getList();
  getCategoryList();
  getLevelList();
});

const searchRef = ref(null);
const searchForm = ref({
  providerName: "",
});

const page = ref(1);
const size = ref(10);
const total = ref(0);
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    size.value = e.size;
  }

  handleApiResponse(() =>
    GetProviderToOpticianList({
      page: page.value,
      size: size.value,
      ...searchForm.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.providerToOpticianList || [];
      total.value = res.data.total || 0;
    }
  });
}

const handleReset = () => {
  searchRef.value.resetFields();
  getList();
};

// 1.新增或者编辑
const drawer = ref(false);
const detailForm = ref([]);
const openDrawer = (row) => {
  detailForm.value = cloneDeep(row);
  drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  drawer.value = false;
};

// 2.删除
const handleRemove = (id) => {
  ElMessageBox.confirm("此操作将永久删除该供应商, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DeleteProviderToOptician({ id })).then((res) => {
      if (res.code == 0) {
        ElMessage.success("删除成功");
        getList();
      }
    });
  });
};

const categoryList = ref([]);
async function getCategoryList() {
  handleApiResponse(() => GetGoodsTotalCategory()).then((res) => {
    if (res.code == 0) {
      categoryList.value = res.data.list || [];
    }
  });
}
const levelList = ref([]);
async function getLevelList() {
  handleApiResponse(() =>
    GetProviderToOpticianLevelList({
      page: 1,
      size: 1234,
    })
  ).then((res) => {
    if (res.code == 0) {
      levelList.value = res.data.providerToOpticianLevelList || [];
    }
  });
}
</script>

<style scoped lang="scss">
.supplier_card {
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>